<script setup lang="ts">
import { i18n } from '@/common/plugin/lang';
import { password1, password2 } from '@/common/util/crypto';
import { useI18n } from 'vue-i18n';

const router = useRouter();
const currentPage = ref(1);

// 切换语言
const currentLang = ref(i18n.global.locale);
const langOptions = [
  { label: '简体中文', value: 'zh-CN' },
  { label: 'English', value: 'en' },
];
const { locale, t } = useI18n();
const handleSwitchLang = (lang: any) => {
  locale.value = lang;
  useSettingStore().setLang(lang);
};

// 表单
const schema = {
  password: yup.string().label(t('public.password')),
  password_confirm: yup
      .string()
      .required()
      .oneOf([yup.ref('password')], t('public.passwordNoSame'))
      .label(t('public.repeatPassword')),
};
const { values, errors, handleSubmit } = useForms(schema);

// 设置密码
const onSubmit = handleSubmit(() => {
  useUserStore().setPassword(password1(values.password));
  useUserStore().setPasshash(password2(values.password));
  router.push({ name: 'index' });
});

// 是否打开导入备份弹出层
// const isShow = ref(false);


</script>

<template>
  <div class="main-container">
    <div class="nav-header-view mb-2">
      <!--            <div class="nav-view-item">-->
      <!--                <div class="btn-import" @click="isShow = true">-->
      <!--                    {{ $t('public.importBackup') }}-->
      <!--                </div>-->
      <!--            </div>-->
      <div class="nav-view-item flex  items-center mr-2">
        <img class="w-[16px] h-[16px]" src="@/assets/images/change_language@2x.png" />
        <n-popselect
            v-model:value="currentLang"
            :options="langOptions"
            trigger="click"
            @update:value="handleSwitchLang"
        >
          <div class="flex justify-center items-center cursor-pointer">
            <span class="mx-2 text-sm">{{ $t('public.language') }}</span>
            <icon-down-one class="mb-[2px]" theme="filled" size="14" fill="#333" />
          </div>
        </n-popselect>
      </div>
    </div>

    <div class="container" v-if="currentPage == 1">
      <div class="title">
        <p>{{ $t('public.welcomeTo') }}</p>
        <img class="logo-img" src="@/assets/images/ngklogo.png" style="width: 112px;height: 74px;"/>
      </div>

      <div class="tip">{{ $t('public.settingPasswordTip') }}</div>

      <div class="password-form px-12">
        <!-- 密码 -->
        <div class="flex flex-col">
          <n-input
              class="h-[50px] rounded-full bg-gray-50 px-7 leading-[50px]"
              type="password"
              :placeholder="$t('public.password')"
              v-model:value="values.password"
          />
          <span class="self-end mr-5 mt-1 h-6 text-xs text-yellow-300">
                        {{ errors.password }}
                    </span>
        </div>
        <!-- 确认密码 -->
        <div class="flex flex-col">
          <n-input
              class="h-[50px] rounded-full bg-gray-50 px-7 leading-[50px]"
              type="password"
              :placeholder="$t('public.repeatPassword')"
              v-model:value="values.password_confirm"
          />
          <span class="self-end mr-5 mt-1 h-6 text-xs text-yellow-300">
                        {{ errors.password_confirm }}
                    </span>
        </div>

        <n-button class="mt-10 bg-primary w-full rounded-[50px] h-[50px]" type="primary" @click="onSubmit()">
          {{ $t('public.start') }}
        </n-button>
      </div>
    </div>

<!--    <import-back-up :is-show="isShow" @close="isShow = false"></import-back-up>-->
  </div>
</template>

<style lang="scss" scoped>
.btn-import {
  margin: 10px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #409eff;
  border-radius: 5px;
  cursor: pointer;
}

:deep(.n-input-wrapper){
  z-index: 20;
}
:deep(.n-input__border){
  background-color: #ecf5ff;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
  width: 375px;
  margin: 0 auto;
  background-image: url(@/assets/images/bg-2.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 210px 250px;

  .title {
    display: flex;
    flex-direction: column;
    font-size: 37px;
    font-weight: bold;
    align-items: center;
    margin: 25px 0 35px 0;
    .logo-img {
      padding-top: 10px;
      width: 180px;
    }
  }
  .nav-header-view {
    background-color: rgba(255, 255, 255, 0);
    font-size: 18px;
    letter-spacing: 0;
    text-align: right;
    width: 100%;
    margin-top: 5px;
  }

  .nav-view-item{
    justify-content: right;
  }

  .tip {
    padding-bottom: 20px;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: #333333;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
  }
}
</style>
<!--<script setup lang="ts">-->
<!--import { password1, password2 } from '@/common/util/crypto.js';-->

<!--const { t } = useI18n();-->

<!--const formData = reactive({-->
<!--    password: '',-->
<!--});-->

<!--const user = useUserStore();-->
<!--const handleSubmit = async () => {-->
<!--    if (!formData.password) {-->
<!--        return window.msg.warning(t('password.empty'));-->
<!--    }-->

<!--    const password = password1(formData.password);-->
<!--    const passhash = password2(formData.password);-->
<!--    if (passhash != user.passhash) {-->
<!--        return window.msg.warning(t('password.error'));-->
<!--    }-->

<!--    user.setPassword(password);-->
<!--};-->
<!--</script>-->

<!--<template>-->
<!--    <div class="app-unlock">-->
<!--&lt;!&ndash;      v-if="user.isLock"&ndash;&gt;-->
<!--        <header>-->
<!--            <img class="logo" src="@/assets/images/favicon.ico" />-->
<!--            <div class="tip">{{ $t('password.inputPasswrod') }}</div>-->
<!--            <div class="tip tip2">{{ $t('password.unlockTip') }}</div>-->
<!--        </header>-->
<!--        <n-form :model="formData">-->
<!--            <n-input :placeholder="$t('password.toUnlock')" type="password" v-model:value="formData.password" :autofocus="true" @keyup.enter="handleSubmit">-->
<!--                <img class="prefix-img" slot="prefix" src="@/assets/images/initial_unlock@2x.png" />-->
<!--            </n-input>-->

<!--            <n-button @click="handleSubmit" class="submit-bottom">{{ $t('password.unlock') }}</n-button>-->
<!--        </n-form>-->
<!--    </div>-->

<!--    <router-view >-->
<!--&lt;!&ndash;      v-else&ndash;&gt;-->
<!--    </router-view>-->
<!--</template>-->

<!--<style lang="scss" scoped>-->
<!--.app-unlock {-->
<!--    width: 100%;-->
<!--    height: 100%;-->
<!--    display: flex;-->
<!--    flex-direction: column;-->
<!--    justify-content: flex-start;-->
<!--    align-items: center;-->
<!--    header {-->
<!--        height: 45%;-->
<!--        display: flex;-->
<!--        flex-direction: column;-->
<!--        justify-content: flex-end;-->
<!--        align-items: center;-->
<!--        .logo {-->
<!--            display: block;-->
<!--            width: 80px;-->
<!--        }-->

<!--        .tip {-->
<!--            margin-top: 30px;-->
<!--            line-height: 20px;-->
<!--            text-align: center;-->
<!--            font-size: 16px;-->
<!--            color: #333;-->
<!--        }-->
<!--        .tip2 {-->
<!--            margin-top: 10px;-->
<!--            font-size: 12px;-->
<!--            color: #666;-->
<!--            padding: 0 10px;-->
<!--            line-height: 1.5em;-->
<!--        }-->
<!--    }-->

<!--    .n-form {-->
<!--        margin-top: 30px;-->
<!--        text-align: center;-->
<!--        width: 260px;-->
<!--        // /deep/ .n-input__prefix {-->
<!--        //     padding: 6px;-->
<!--        // }-->
<!--        // /deep/ .n-input__inner {-->
<!--        //     padding-left: 36px;-->
<!--        //     font-weight: 400;-->
<!--        // }-->
<!--        .n-input {-->
<!--            margin-bottom: 25px;-->
<!--            .prefix-img {-->
<!--                width: 18px;-->
<!--                height: 22px;-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--}-->
<!--</style>-->
